<template>
  <view class="bagua-compare">
    <cm-label-text label="本位" label-width="50" border-split border-bottom content-no-padding>
      <view class="bagua-compare-line">
        <view class="bagua-compare-base cm-flex cm-flex-a-center cm-flex-g-1" :class="[ isBaseActive ? 'active' : '' ]" @click="baseClickHandler">
          <view class="cm-flex cm-flex-a-center cm-padding-5" v-if="baseObj">
            <text>{{ baseObj.description }}</text>
            <bagua-element :bagua="baseObj" size="12" yinyang wuxing></bagua-element>            
          </view>
        </view>
      </view>
    </cm-label-text>
    <cm-label-text label="对位" label-width="50" border-split border-bottom content-no-padding>
      <view class="bagua-compare-line">
        <view class="bagua-compare-opposite cm-flex cm-flex-a-center cm-flex-g-1" :class="[ isOppositeActive ? 'active' : '' ]" @click="oppositeClickHandler">
          <view class="cm-flex cm-flex-a-center cm-padding-5" v-if="oppositeObj">
            <text>{{ oppositeObj.description }}</text>
            <bagua-element :bagua="oppositeObj" size="12" yinyang wuxing></bagua-element>            
          </view>
        </view>
      </view>
    </cm-label-text>
    <cm-label-text label="结果" label-width="50" border-split border-bottom content-no-padding>
      <view class="bagua-compare-line cm-flex-a-center">
        <view class="cm-text-12 cm-flex-g-1 cm-padding-5">{{ relationTxt }}</view>
        <cm-button type="primary" radius="none" cm-class="cm-flex-s-0" :cm-style="{ padding: '9px 12px' }" @click="detailClickHandler">详细</cm-button>
      </view>
    </cm-label-text>
  </view>
</template>

<script src="./baguaCompare.js"></script>

<style lang="stylus">
@import './baguaCompare.styl'
</style>
